<template>
	<view class="index-content">
		<TopBar :indexflag="true" :combakflag="false" :lang="true" :bottom="true" title="Sinchay"
			:barstyle="colortopic">
		</TopBar>
		<view class="scroll" :style="{direction:i18nLocale=='ug'?'rtl':''}">
			<scroll-view scroll-y="true" @scrolltolower="scrolldata"
				style="height:100%;width:100%;position: relative;box-sizing: border-box;">
				<view class="char-image" dir="ltr">
					<u-skeleton :loading="swiperList.length==0" :title="false" rows="1" rowsHeight="150"
						rowsWidth="100%" :animate="true"></u-skeleton>
					<swiper :indicator-dots="true" v-if="swiperList.length!=0" :autoplay="true" :interval="3000"
						:duration="1000" indicator-active-color="#15c45b" style="width:100%;height:100%">
						<swiper-item v-for="item in swiperList" :key="item.id"
							style="width:100%;height:100%;border-radius: 30rpx;" @click="changeSwiper(item.id)">
							<view class="swiper-item">
								<image :src="getImgSrc(item.cover)"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="card-title"> <text class="bar"></text>{{$t('ListShops')}}</view>
				<u-empty v-if="shopList.length==0 && !loadshow" margin-top="100" mode="favor" :text="$t('EmptyShops')"
					iconSize="100" textSize="14">
				</u-empty>
				<view class="skeleton" v-for="(item,index) in 3" v-if="loadshow" :key="index">
					<view class="left" style="width:30%;">
						<u-skeleton :loading="loadshow" :title="false" rows="1" rowsHeight="100" rowsWidth="100%"
							:animate="true"></u-skeleton>
					</view>
					<view class="left" style="width:65%;">
						<u-skeleton :loading="loadshow" rows="2" rowsHeight="20" rowsWidth="100%"
							:animate="true"></u-skeleton>
					</view>
				</view>
				<view class="shop-item" v-if="shopList.length!=0 && !loadshow" v-for="(item,index) in shopList"
					:key="item.id" @click="changeshop(item.id)">
					<view class="left">
						<view class="image-box">
							<image :src="getImgSrc(item.logo)" mode=""></image>
							<view class="off-text" v-if="!item.status">{{$t('Closed')}}</view>
						</view>
						<view class="shop-content">
							<view class="title">{{i18nLocale=='ug'?item.ug_name:item.cn_name}}</view>
							<view class="sub-title">
								<text class="">{{$t('Sold')}}: 999 </text>
								<text class=""> {{$t('Evaluate')}}: 10</text>
							</view>
							<view class="star">
								<u-rate :count="count" readonly active-color="#ffa902" gutter="1"
									inactive-color="#b2b2b2" v-model="value"></u-rate>
								<view class="right" v-if="topId">
									{{item.distance>=1?item.distance.toFixed(2)+'km':item.distance.toFixed(2)*1000+'m'}}
								</view>
								<view class="right" v-if="!topId">{{$t('Neighborhood')}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="" v-if="to==total" style="height:200rpx;"></view>
			</scroll-view>
		</view>
		<Loading :show="tabloadshow" iconName="circle" bgZindex="99" bgColor=""  :text="$t('Loading')"></Loading>
	</view>
</template>

<script>
	import {
		getshops,
		getswipers
	} from '@/api/all.js';
	export default {
		mounted() {
			this.getSwipers();
			this.getShops();
		},
		data() {
			return {
				acnav: 0,
				loadshow: true,
				tabloadshow:false,
				count: 5,
				value: 5,
				swiperList: [],
				pageSize: 1,
				page: 1,
				total: 0,
				to: 1,
				shopList: []
			}
		},
		watch: {
			"$store.state.top_id": function(val, oldval) {
				this.getShops();
			}
		},
		computed: {
			i18nLocale() {
				return this.$i18n.locale;
			},
			topId() {
				return this.$store.state.top_id;
			}
		},
		methods: {
			scrolldata() {
				if (this.to != this.total) {
					this.tabloadshow = true;
					this.getShops();
				} else {

				}
			},
			//获取商铺
			getShops() {
				this.loadshow = true;
				let that = this;
				getshops({}).then(res => {
					let data = res.body;
					that.total = data.total;
					that.to = data.to;
					that.page++;
					let mydata = that.shopList.concat(data.data);
					that.shopList = mydata;
					that.tabloadshow=false;
					setTimeout(() => {
						this.loadshow = false;
					}, 200)
				})
			},
			//获取轮播图
			getSwipers() {
				getswipers({}).then(res => {
					if (res.code == 200) {
						this.swiperList = res.body.data;
					}
				})
			},
			//点击轮播图
			changeSwiper(id) {
				uni.navigateTo({
					url: '/pages/index/swipercontent?id=' + id
				})
			},
			//点击商铺
			changeshop(id) {
				uni.navigateTo({
					url: '/pages/index/index?shop_id=' + id
				})
			},
			// 两点间距离
			distance(la1, lo1, la2, lo2) {
				var La1 = (la1 * Math.PI) / 180.0
				var La2 = (la2 * Math.PI) / 180.0
				var La3 = La1 - La2
				var Lb3 = (lo1 * Math.PI) / 180.0 - (lo2 * Math.PI) / 180.0
				var s = 2 * Math.asin(
					Math.sqrt(
						Math.pow(Math.sin(La3 / 2), 2) +
						Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)
					)
				)
				s = s * 6378.137 //地球半径
				s = Math.round(s * 10000) / 10000
				return s;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.index-content {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 0rpx $uni-spacing-padding-sm;

		.scroll {
			width: 100%;
			height: calc(100% - 200rpx);
			box-sizing: border-box;
			margin-top: 20rpx;
			.char-image {
				width: 100%;
				height: 300rpx;
				box-sizing: border-box;
				.swiper-item {
					width: 100%;
					height: 100%;
					border-radius: $uni-border-radius-lg;
				}

				image {
					width: 100%;
					height: 100%;
					border-radius: $uni-border-radius-lg;
				}
			}

			.card-title {
				font-size: $uni-font-size-base;
				color: $uni-color-title;
				margin-top: $uni-spacing-padding-sm;
				padding: 10rpx 0rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				.bar {
					width: 15rpx;
					height: 40rpx;
					background-color: $uni-color-topic;
					border-radius: 20rpx;
					margin: 0rpx 10rpx;
				}
			}

			.shop-item {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				background-color: $uni-bg-color-box;
				border-radius: $uni-border-radius-base;
				box-shadow: $uni-bg-shadow;
				margin-top: 30rpx;
				padding: $uni-spacing-padding-sm;

				.left {
					display: flex;
					align-items: center;

					.image-box {
						position: relative;
						width: 200rpx;
						height: 200rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: $uni-border-radius-lg;
							position: absolute;
						}

						.off-text {
							color: #fff;
							font-size: $uni-font-size-base;
							width: 100%;
							height: 100%;
							position: absolute;
							border-radius: $uni-border-radius-lg;
							z-index: 99;
							top: 0%;
							left: 0%;
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: rgba(0, 0, 0, 0.4);
						}
					}

					.shop-content {
						height: 200rpx;
						box-sizing: border-box;
						padding: 20rpx;

						.title {
							color: $uni-color-title;
							font-size: $uni-font-size-base;
						}

						.sub-title {
							color: $uni-text-color-grey;
							font-size: $uni-font-size-sm0;
							display: flex;
							box-sizing: border-box;

							text {
								padding: 0rpx 30rpx;
							}

						}

						.star {
							display: flex;
							align-items: center;
							justify-content: space-between;
							pointer-events: none;
						}

						display: flex;
						flex-direction: column;
						justify-content: space-around;
					}
				}

				.right {
					color: $uni-text-color-grey;
					font-size: $uni-font-size-sm1;
				}
			}
		}
	}

	.skeleton {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	/deep/ .u-skeleton__wrapper__content__rows {
		width: 100% !important;
	}
</style>